<template>

  <div class="container3">

    <el-row style="height: 10%">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div style="letter-spacing: 1rem;color: ghostwhite;font-weight: bold;font-size:3.2rem;text-align: center;">
            冲压车间生产管理大屏
          </div>
        </div>
      </el-col>
    </el-row>


    <el-row style="height: 50%">
      <el-col :span="12" style="margin: 1rem;width: 42vw;height: 30vh">
        <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">工单进度</div>
        <div>
          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

            <el-row>
              <el-col :span="6" style="padding-left: 3rem">
                <div>工单号</div>
              </el-col>
              <el-col :span="9" style="position: relative;left: 6rem;">
                <div>物料规格</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;right: 1rem;">工单下达数量</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;left:1.3rem;">工序工单数</div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;left:1.5rem;">工单入库数</div>
              </el-col>
            </el-row>

          </div>

          <div ref="tableContent16" class="table-content">
            <template v-for="(item, index) in shopOrderProgressList">
              <div class="table-line content-line">
                <div
                    style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="6">
                      <div>{{ item.shopOrder }}</div>
                    </el-col>
                    <el-col :span="9" style="position: relative;right: 1rem;">
                      <div>{{ item.itemDesc }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;right: 1rem;">{{ item.releaseQty }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;left: 0.5rem;">{{ item.operationOrderQty }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;left:0.5rem;">{{ item.erpCompleteQty }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>
        </div>
      </el-col>

      <el-col :span="12">
        <div style="margin: 1rem;width: 52vw;height: 30vh">

          <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">转子坯不配套数量</div>

          <div>
            <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">

              <el-row>
                <el-col :span="4" style="padding-left: 2rem">
                  <div style="position: relative;right: 1rem;">品名</div>
                </el-col>
                <el-col :span="4">
                  <div style="position: relative;right: 1rem;">工单号</div>
                </el-col>
                <el-col :span="4">
                  <div>物料规格</div>
                </el-col>
                <el-col :span="2">
                  <div style="position: relative;right: 1rem;">已下达数</div>
                </el-col>
                <el-col :span="2">
                  <div style="position: relative;right: 0.5rem;">入库申请数</div>
                </el-col>
                <el-col :span="2">
                  <div>已入库数</div>
                </el-col>
                <el-col :span="2">
                  <div style="position: relative;left: 0.8rem;">不良数</div>
                </el-col>
                <el-col :span="2">
                  <div style="position: relative;left: 1rem;">报废数</div>
                </el-col>
                <el-col :span="2">
                  <div style="position: relative;left: 1rem;">合计数</div>
                </el-col>
              </el-row>

            </div>

            <div ref="tableContent3" class="table-content">
              <template v-for="(item, index) in rotorNoMatchList">
                <div class="table-line content-line">
                  <div
                      style="text-align: center;font-size: 80%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                    <el-row>
                      <el-col :span="4">
                        <div style="position: relative;right: 1.5rem;">{{ item.itemName }}</div>
                      </el-col>
                      <el-col :span="4">
                        <div style="position: relative;right: 3rem;">{{ item.shopOrder }}</div>
                      </el-col>
                      <el-col :span="4">
                        <div style="position: relative;right: 1.8rem;">{{ item.itemDesc }}</div>
                      </el-col>
                      <el-col :span="2">
                        <div style="position: relative;right: 1rem;">{{ item.releaseQty }}</div>
                      </el-col>
                      <el-col :span="2">
                        <div>{{ item.erpApplyQty }}</div>
                      </el-col>
                      <el-col :span="2">
                        <div>{{ item.erpCompleteQty }}</div>
                      </el-col>
                      <el-col :span="2">
                        <div>{{ item.ncQty }}</div>
                      </el-col>
                      <el-col :span="2">
                        <div>{{ item.scrap }}</div>
                      </el-col>
                      <el-col :span="2">
                        <div>{{ item.sfcQty }}</div>
                      </el-col>
                    </el-row>
                  </div>

                </div>
              </template>
            </div>

          </div>

        </div>
      </el-col>

    </el-row>


    <el-row style="height: 40%">

      <el-col :span="12">
        <div>
          <SimEcharts :chart-data="pillarData2"/>
        </div>
      </el-col>

      <el-col :span="12" style="margin: 1rem;width: 45vw;height: 28vh;position: relative;bottom: 4rem;">
        <div>
          <div style="text-align: center;color: white;font-size: 1.0rem;font-weight: bold;">高速冲产能</div>

          <div style="font-size: x-small;padding-left: 2rem;padding-top: 0.5rem;color:white;">
            <el-row>
              <el-col :span="4">
                <div>
                  员工名
                </div>
              </el-col>
              <el-col :span="4">
                <div style="position: relative;right: 3rem;">
                  物料品名
                </div>
              </el-col>
              <el-col :span="4">
                <div style="position: relative;right: 3.5rem;">
                  物料规格
                </div>
              </el-col>
              <el-col :span="3">
                <div style="position: relative;right: 3.6rem;">
                  sfc条码
                </div>
              </el-col>
              <el-col :span="2">
                <div style="position: relative;right: 3.8rem;">
                  sfc数量
                </div>
              </el-col>
              <el-col :span="2">
                <div style="position: relative;right: 3.2rem;">
                  进站时间
                </div>
              </el-col>
              <el-col :span="2">
                <div style="position: relative;right: 2.7rem;">
                  出站时间
                </div>
              </el-col>
              <el-col :span="2">
                <div style="position: relative;right: 2.3rem;">
                  间隔时间
                </div>
              </el-col>
              <el-col :span="1">
                <div style="position: relative;right: 2rem;">
                  产能
                </div>
              </el-col>
            </el-row>
          </div>

          <div ref="tableContent5" class="table-content">
            <template v-for="(item, index) in punchingCapacity">
              <div class="table-line content-line">
                <div
                    style="text-align: center;font-size: 60%;padding-top: 0.5rem;padding-bottom: 0.3rem;letter-spacing: 0.1rem;">
                  <el-row>
                    <el-col :span="4">
                      <div style="position: relative;right: 1.3rem;">{{ item.userName }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="position: relative;right: 4.5rem;">{{ item.itemName }}</div>
                    </el-col>
                    <el-col :span="4">
                      <div style="position: relative;right: 4.8rem;">{{ item.itemDesc }}</div>
                    </el-col>
                    <el-col :span="3">
                      <div style="position: relative;right: 4.5rem;">{{ item.sfc }}</div>
                    </el-col>
                    <el-col :span="2">
                      <div style="position: relative;right: 3.9rem;">{{ item.sfcQty }}</div>
                    </el-col>
                    <el-col :span="2">
                      <div style="position: relative;right: 3.2rem;">{{ item.inTime }}</div>
                    </el-col>
                    <el-col :span="2">
                      <div style="position: relative;right: 2.7rem;">{{ item.outTime }}</div>
                    </el-col>
                    <el-col :span="2">
                      <div style="position: relative;right: 2.7rem;">{{ item.intervalTime }}</div>
                    </el-col>
                    <el-col :span="1">
                      <div style="position: relative;right: 2.2rem;">{{ item.capacity }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </template>
          </div>
        </div>

      </el-col>
    </el-row>


  </div>

</template>

<script>
import {closeWebsocket, connectWebsocket, sendMessage} from "@/api/websocket";
import {peopleAttendance} from "@/api/service-module/dashBoard/echartsData";

export default {
  name: "ExtrusionBilletDashBoard",
  data() {
    return {
      pillarData2: JSON.parse(JSON.stringify(peopleAttendance)),
      shopOrderProgressList: [
        {
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ110*Φ58_170P_底:Φ81.5_高速冲_24槽',
          releaseQty: '650',
          operationOrderQty: '330',
          erpCompleteQty: '320',
        },
        {
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ110*Φ58_170P_底:Φ81.5_高速冲_24槽',
          releaseQty: '650',
          operationOrderQty: '330',
          erpCompleteQty: '320',
        },
        {
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ110*Φ58_170P_底:Φ81.5_高速冲_24槽',
          releaseQty: '650',
          operationOrderQty: '330',
          erpCompleteQty: '320',
        },
        {
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ110*Φ58_170P_底:Φ81.5_高速冲_24槽',
          releaseQty: '650',
          operationOrderQty: '330',
          erpCompleteQty: '320',
        },
        {
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ110*Φ58_170P_底:Φ81.5_高速冲_24槽',
          releaseQty: '650',
          operationOrderQty: '330',
          erpCompleteQty: '320',
        },
        {
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ110*Φ58_170P_底:Φ81.5_高速冲_24槽',
          releaseQty: '650',
          operationOrderQty: '330',
          erpCompleteQty: '320',
        },
        {
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ110*Φ58_170P_底:Φ81.5_高速冲_24槽',
          releaseQty: '650',
          operationOrderQty: '330',
          erpCompleteQty: '320',
        },
        {
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ110*Φ58_170P_底:Φ81.5_高速冲_24槽',
          releaseQty: '650',
          operationOrderQty: '330',
          erpCompleteQty: '320',
        },
        {
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ110*Φ58_170P_底:Φ81.5_高速冲_24槽',
          releaseQty: '650',
          operationOrderQty: '330',
          erpCompleteQty: '320',
        },
        {
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ110*Φ58_170P_底:Φ81.5_高速冲_24槽',
          releaseQty: '650',
          operationOrderQty: '330',
          erpCompleteQty: '320',
        },
      ],
      rotorNoMatchList: [
        {
          itemName: '转子坯',
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ140*Φ60_170P_底:Φ81.5_24槽',
          releaseQty: '330',
          erpApplyQty: '300',
          erpCompleteQty: '300',
          ncQty: '20',
          scrap: '10',
          sfcQty: '300'
        },
        {
          itemName: '转子坯',
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ140*Φ60_170P_底:Φ81.5_24槽',
          releaseQty: '330',
          erpApplyQty: '300',
          erpCompleteQty: '300',
          ncQty: '20',
          scrap: '10',
          sfcQty: '300'
        },
        {
          itemName: '转子坯',
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ140*Φ60_170P_底:Φ81.5_24槽',
          releaseQty: '330',
          erpApplyQty: '300',
          erpCompleteQty: '300',
          ncQty: '20',
          scrap: '10',
          sfcQty: '300'
        },
        {
          itemName: '转子坯',
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ140*Φ60_170P_底:Φ81.5_24槽',
          releaseQty: '330',
          erpApplyQty: '300',
          erpCompleteQty: '300',
          ncQty: '20',
          scrap: '10',
          sfcQty: '300'
        }, {
          itemName: '转子坯',
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ140*Φ60_170P_底:Φ81.5_24槽',
          releaseQty: '330',
          erpApplyQty: '300',
          erpCompleteQty: '300',
          ncQty: '20',
          scrap: '10',
          sfcQty: '300'
        },
        {
          itemName: '转子坯',
          shopOrder: 'D-GD022005216742',
          itemDesc: 'Φ140*Φ60_170P_底:Φ81.5_24槽',
          releaseQty: '330',
          erpApplyQty: '300',
          erpCompleteQty: '300',
          ncQty: '20',
          scrap: '10',
          sfcQty: '300'
        }
      ],
      punchingCapacity: [
        {
          userName: '吴富全',
          itemName: '转子坯',
          itemDesc: 'Φ34*Φ17_300P_不带铝_高速冲',
          sfc: 'D-05JC220617607',
          sfcQty: '100',
          inTime: '2022-06-29 07:17:05',
          outTime: '2022-06-29 07:17:22',
          intervalTime: '17s',
          capacity: '357/min'
        },
        {
          userName: '吴富全',
          itemName: '转子坯',
          itemDesc: 'Φ34*Φ17_300P_不带铝_高速冲',
          sfc: 'D-05JC220617607',
          sfcQty: '100',
          inTime: '2022-06-29 07:17:05',
          outTime: '2022-06-29 07:17:22',
          intervalTime: '17s',
          capacity: '357/min'
        },
        {
          userName: '吴富全',
          itemName: '转子坯',
          itemDesc: 'Φ34*Φ17_300P_不带铝_高速冲',
          sfc: 'D-05JC220617607',
          sfcQty: '100',
          inTime: '2022-06-29 07:17:05',
          outTime: '2022-06-29 07:17:22',
          intervalTime: '17s',
          capacity: '357/min'
        },
        {
          userName: '吴富全',
          itemName: '转子坯',
          itemDesc: 'Φ34*Φ17_300P_不带铝_高速冲',
          sfc: 'D-05JC220617607',
          sfcQty: '100',
          inTime: '2022-06-29 07:17:05',
          outTime: '2022-06-29 07:17:22',
          intervalTime: '17s',
          capacity: '357/min'
        },
        {
          userName: '吴富全',
          itemName: '转子坯',
          itemDesc: 'Φ34*Φ17_300P_不带铝_高速冲',
          sfc: 'D-05JC220617607',
          sfcQty: '100',
          inTime: '2022-06-29 07:17:05',
          outTime: '2022-06-29 07:17:22',
          intervalTime: '17s',
          capacity: '357/min'
        },
        {
          userName: '吴富全',
          itemName: '转子坯',
          itemDesc: 'Φ34*Φ17_300P_不带铝_高速冲',
          sfc: 'D-05JC220617607',
          sfcQty: '100',
          inTime: '2022-06-29 07:17:05',
          outTime: '2022-06-29 07:17:22',
          intervalTime: '17s',
          capacity: '357/min'
        },
        {
          userName: '吴富全',
          itemName: '转子坯',
          itemDesc: 'Φ34*Φ17_300P_不带铝_高速冲',
          sfc: 'D-05JC220617607',
          sfcQty: '100',
          inTime: '2022-06-29 07:17:05',
          outTime: '2022-06-29 07:17:22',
          intervalTime: '17s',
          capacity: '357/min'
        },
        {
          userName: '吴富全',
          itemName: '转子坯',
          itemDesc: 'Φ34*Φ17_300P_不带铝_高速冲',
          sfc: 'D-05JC220617607',
          sfcQty: '100',
          inTime: '2022-06-29 07:17:05',
          outTime: '2022-06-29 07:17:22',
          intervalTime: '17s',
          capacity: '357/min'
        }
      ],
      array: []
    }
  },
  methods: {
    reloadWeb() {
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload, 1000 * 60 * 60 * 8)
    },
    initData() {
      this.pillarData2.title.text = '人员出勤'
      this.pillarData2.title.textStyle.fontSize = '20'
      this.pillarData2.title.textStyle.color = '#fffffb'

      this.pillarData2.xAxis.data = ['冲压组']
      this.pillarData2.series[0].data = [90]
      this.pillarData2.series[1].data = [60]
      this.pillarData2.series[2].data = [30]
    },
    initWebData() {
      connectWebsocket(
          // 测试地址
          process.env.VUE_APP_WS_URL + '/ProduceManagerScreen/WorkShopProduct',
          //'ws://192.168.12.24:20088/ProduceManagerScreen/WorkShopProduct',
          // 传递给后台的数据
          {},
          // 成功拿到后台返回的数据的回调函数
          (data) => {
            let dataJson = JSON.parse(data)
            console.log(dataJson)
            this.shopOrderProgressList = dataJson.selectShopOrderCompletionSchedule
            this.rotorNoMatchList = dataJson.selectRotatorNoMatching
            this.punchingCapacity = dataJson.selectHighSpeedPunching
            for (let key in dataJson.selectOutOfdDuty) {
              if (this.array.length < 1) {
                this.array.push(key)
              }
            }
            this.pillarData2.xAxis.data = this.array

            this.pillarData2.series[0].data[0] = dataJson.selectOutOfdDuty['冲压组'][0]
            this.pillarData2.series[1].data[0] = dataJson.selectOutOfdDuty['冲压组'][1]
            this.pillarData2.series[2].data[0] = dataJson.selectOutOfdDuty['冲压组'][2]
          },
          () => {
            sendMessage("Im tired!")
          }
      )
    },
    rollText() {
      let speed = 280
      let that = this
      let tmpHi = 0

      function Marquee() {
        if (that.$refs.tableContent16) {
          tmpHi = that.$refs.tableContent16.scrollTop++
          if (tmpHi === that.$refs.tableContent16.scrollTop) {
            console.log(that.$refs.tableContent16.scrollTop)
            that.$refs.tableContent16.scrollTop = 0
          }
        }

        if (that.$refs.tableContent3) {
          tmpHi = that.$refs.tableContent3.scrollTop++
          if (tmpHi === that.$refs.tableContent3.scrollTop) {
            that.$refs.tableContent3.scrollTop = 0
          }
        }

        if (that.$refs.tableContent5) {
          tmpHi = that.$refs.tableContent5.scrollTop++
          if (tmpHi === that.$refs.tableContent5.scrollTop) {
            that.$refs.tableContent5.scrollTop = 0
          }
        }

      }

      setInterval(Marquee, speed)
    },
  },
  created() {
    this.reloadWeb()
    this.initData()
    this.initWebData()
  },
  mounted() {
    this.rollText()
  },
  destroyed() {
    closeWebsocket()
  }
}
</script>

<style lang="scss" scoped>
.container3 {
  background-image: url("../../assets/manage_board/06.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;

  .table-content {
    height: 24vh;
    color: #ffffff;
    overflow: hidden;
    margin-top: 0.5rem;

    .table-line:nth-of-type(odd) {
      background: rgba(122, 178, 203, 0.22);
    }

    .table-line:nth-of-type(even) {
      background: rgba(213, 196, 127, 0.22);
    }

    .table-line {
      position: relative;
      border: 1px solid rgba(23, 17, 17, 0.98);
      border-radius: 5px;
      color: cyan;
      margin-top: 0.2rem;
      line-height: 1.2rem;

      .line-cell {
        word-wrap: break-word;
      }
    }

  }

}
</style>
